<template>
  <div>
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        custom-class="zhiyinglistdialog"
        :visible.sync="dialogFormVisible"
        width="900px"
        @close="close"
    >
        <div class="">
            <div class="m-b-25">
                <el-button type="primary" size="mini" @click="addPlus">+新增</el-button>
            </div>
            <el-table
                :data="zhiyingList"
                height="150"
                @row-dblclick="handleClick"
                v-loading="showLoading"
                size="mini"
                border
                style="width: 100%">

                <el-table-column
                prop="createtime"
                label="设置时间"
                sortable
                width="180">
                    <template slot-scope="scope">
                       <span>{{ moment.unix(scope.row.createtime).format('YYYY-MM-DD HH:mm:ss') }}</span> 
                    </template>
                    
                </el-table-column>

                <el-table-column
                prop="zyvolume"
                label="数量"
                sortable
                width="80">

                </el-table-column>
                <el-table-column
                prop="stop_profit_price"
                sortable
                width="120"
                label="止盈价格">
                </el-table-column>

                <el-table-column
                prop="stop_loss_price"
                sortable
                width="120"
                label="止损价格">
                </el-table-column>

                <el-table-column
                prop="daystatus"
                width="130"
                label="有效期">
                    <template slot-scope="scope">
                       <span>{{ scope.row.daystatus == 0 ? '当日有效':'永久有效'}}</span> 
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        class="m-r-10"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">移除该设置</el-button>
                        
                        <span class="m-l-20 m-r-10">启动:</span>
                        <el-switch
                        v-model="scope.row.onoff"
                        @change="onOff(scope.row)"
                        :active-value="1" 
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div slot="footer" class="dialog-footer">
        <el-button @click="close">关 闭</el-button>
        </div>
    </el-dialog>

    <setzhiSUn ref="setzhiSUn" @fetch-data="fetchData"/>
  </div>
  
</template>

<script>
  import setzhiSUn from './setzhiSUn'
  import moment from 'moment'
  export default {
    components: {
        setzhiSUn
    },
    data() {
      return {
        selectItem: {}, // 选中数据
        title: '',
        moment: moment,
        loading: false,
        showLoading: false,
        zhiyingList: [],
        dialogFormVisible: false,
      }
    },
    created() {
        
    },
    methods: {
        fetchData() {
            this.showLoading = true
            this.$post('/order/zyzxlist', {
                contract: this.selectItem.contract,
                risefall: this.selectItem.risefall
                }).then(res => {
                    console.log(res.data)
                    this.showLoading = false
                    this.zhiyingList = res.data
            });
        },
        onOff(row) {
            this.$post('/order/editzyzx',row).then( res => {
                this.$message({
                    type: 'success',
                    message: res.msg
                })
            })
        },
        // 移除设置
        handleDelete(idx, item) {
            this.$post('/order/delzyzx', {
                id: item.id
                }).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.fetchData()
            });
            
        },
        // 设置
        handleClick(row) {
            this.$refs.setzhiSUn.showEdit(row)
        },
        showEdit(row) {
            this.title = '设置止盈止损'
            this.selectItem = row
            this.fetchData()
            this.dialogFormVisible = true
        },
        close() {
            this.dialogFormVisible = false
        },
        addPlus() {
             this.$refs.setzhiSUn.showEdit(this.selectItem)
        }
    },
  }
</script>
